@extends('layouts.system')

@section('css')

    <style type="text/css">
        .btnDiv {
            margin: 30px 0;
        }

        .btnDiv button {
            width: 90px;
            border-radius: 5px;
        }

        .tableDiv {
            padding: 20px 20px 50px 20px;
            background-color: #d7d7d7;
        }

        .tableDiv table tr {
            background-color: #fff;
        }

        .tableDiv .des {
            text-align: right;
        }

        .nav-tabs > li {
            font-size: 14px;
            margin-right: 0;
            border: 1px solid #666;
        }

        .nav-tabs li a, .nav-tabs li a:hover, .nav-tabs li a:focus {
            color: #000;
            text-decoration: none;
        }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
            color: #555;
            cursor: default;
            background-color: #d7d7d7;
            border: none;
            border-bottom-color: transparent;
        }

        .nav-tabs > li.active > a:after, .nav-tabs > li.active > a:hover:after, .nav-tabs > li.active > a:focus:after {
            content: "";
            display: block;
            height: 2px;
            background: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
            border-top: 2px solid #d7d7d7;
            border-radius: 0;
            -webkit-border-radius: 0;
            border-bottom: 0;
            padding-bottom: 10px;
            padding-top: 8px;
            box-shadow: 1px -3px 4px -3px rgba(0, 0, 0, 0.08);
            border-left: 1px solid #ECECEC;
            border-right: 1px solid #ECECEC;
            position: static;
        }

    </style>

@endsection

@section('content')
    <div id="cl-wrapper" class="fixed-menu">
        <div class="container-fluid" id="pcont">
            <div class="col-md-12" style="padding-right: 0;">
                <div class="block-flat">
                    <div class="header">
                        <div class="pull-left">
                            <p class="jb_underline">用户管理&#62;&#62;用户列表</p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="content">
                        <div class="table-responsive">
                            <div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="pull-left"
                                             style="background-color: #ddd; margin: 10px 0; padding:10px 50px;">
                                            <div id="datatable-icons_length" class="dataTables_length col-sm-2"
                                                 style="width: 150px;">
                                                <select size="1" v-model="type" class="form-control" @change="changeType">
                                                    <option value="id">用户ID</option>
                                                    <option value="name">用户名</option>
                                                    <option value="state">状态</option>
                                                </select>
                                            </div>
                                            <div v-if="type !='state'" class="col-sm-2" style="width: 250px;">
                                                <input v-model="keyword" id="searchUserName" type="text" class="form-control"
                                                       placeholder="关键词">
                                            </div>
                                            <div v-if="type=='state'" id="datatable-icons_length" class="dataTables_length col-sm-2"
                                                 style="width: 250px;">
                                                <select size="1" v-model="keyword" class="form-control">
                                                    <option value="1">正常</option>
                                                    <option value="2">封禁</option>
                                                </select>
                                            </div>
                                            <div class="col-sm-2" style="width: 100px;">
                                                <button v-on:click="search" type="button" class="btn btn-jianbei">搜索
                                                </button>
                                            </div>

                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>

                                <table class="table table-bordered" id="datatable-icons">
                                    <thead style="background-color: #ffd866;">
                                    <tr>
                                        <th>选择</th>
                                        <th>用户ID</th>
                                        <th>账号</th>
                                        <th>用户名</th>
                                        <th>等级</th>
                                        <th>身份</th>
                                        <th>总收入</th>
                                        <th>注册时间</th>
                                        <th>最后登录IP</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    <tr class="odd gradeX" v-for="(item,index) in lists">
                                        <td>
                                            <label class="radio-inline">
                                                <input type="checkbox" v-model="checkboxlist[item.id]" class="icheck">
                                            </label>
                                        </td>
                                        <td><span v-text="item.id"></span></td>
                                        <td><span v-text="item.account"></span></td>
                                        <td><span v-text="item.name"></span></td>
                                        <td><span v-text="item.level"></span></td>
                                        <td><span v-text="identity[item.identity]"></span></td>
                                        <td><span v-text="item.total_earnings"></span></td>
                                        <td><span v-text="item.created_at"></span></td>
                                        <td><span v-text="item.client_ip"></span></td>
                                        <td>
                                            <span style="color:#06b55a;" v-if="item.state != 2">正常</span>
                                            <span style="color:red;" v-if="item.state == 2">封禁</span>
                                        </td>
                                        <td>
                                            <a v-bind:href="'/admin/user/show/' + item.id ">查看用户详情</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

                                <div class="row">
                                    <div class="col-sm-12">
                                        @if(in_array($auth['auth'],['group_a','group_b','group_c']))
                                        <div class="pull-left btnDiv">
                                            <button v-on:click="forbid(2)" type="button" class="btn btn-default">封禁用户
                                            </button>
                                            <button v-on:click="forbid(1)" type="button" class="btn btn-default">恢复用户
                                            </button>
                                        </div>
                                        @endif
                                        <div class="pull-right">
                                            <div class="page">
                                                <page :current="current" :total="total" show-total
                                                      show-elevator @on-change="changePage"></page>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">

      Vue.use(VueResource)
      var vm = new Vue({
        el: '#pcont',
        data: {
          current: 1,
          total: 0,
          type: '',
          keyword: '',
          checkboxlist: {},
          identity: {},
          lists: {}
        },
        created: function () {
          getLists(this);
        },
        methods: {
          changePage: function (current) {
            this._data.current = current
            getLists(this);
          },
          search: function () {
            getLists(this);
          },
          forbid: function (state) {
            forbid(this, state)
          },
          changeType: function () {
            this._data.keyword = ''
          }
        }
      })

      //获取用户列表
      function getLists(_vm) {
        var params = {
          current: _vm._data.current
        }
        var conditions = {
          type: _vm._data.type,
          keyword: _vm._data.keyword
        }
        params = $.extend(params, conditions)
        _vm.$http.get('/admin/user/getLists', {params: params})
          .then(function (response) {
            var json = response.body;
            if (json.state == 1) {
              _vm._data.lists = json.data.lists;
              _vm._data.total = json.data.total;
              _vm._data.identity = json.data.identity;
            }
          })
          .catch(function (response) {
            console.log(response)
          })
      }

      //封禁用户
      function forbid(_vm, state) {
        var data = {
          state: state,
          user_lists: _vm.checkboxlist
        }
        _vm.$http.post('/admin/user/forbid', data, {headers: header()})
          .then(function (response) {
            var json = response.body;
            if (json.state == 1) {
              alert('操作成功')
              getLists(_vm);
            }

          })
          .catch(function (response) {
            console.log(response)
          })
      }

    </script>
@endsection